import React, {useEffect, useMemo, useRef, useState} from 'react';
import * as echarts from 'echarts';

function Shouru({startDate,endDate}) {
    const [data,setData] = useState([]),
        charts = useRef();

    useEffect(()=>{
        ax.get("/app/getShouru",{
            params:{
                companyId:window.company_id,
                startDate,
                endDate
            }
        }).then(res=>{
            setData(res.data)
        })
    },[startDate,endDate])

    useEffect(()=>{
        charts.current=echarts.init(document.getElementById('shouruCharts'));
    },[])

    useEffect(()=>{
        if (charts.current && data.length){
            charts.current.setOption({
                title: {
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                xAxis: {
                    data: data.map(item=>item.date)
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: '销售额',
                        type: 'line',
                        label: {
                            show: true,
                            position: 'top'
                        },
                        data: data.map(item=>item.value)
                    }
                ]
            });
        }
    },[charts,data])
    return <div
        id={"shouruCharts"}
        style={{
            height:300,
            width:"100%"
        }}
    />
}

export default Shouru;